<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <br>
    <br>
    <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="formDiv">
      <el-form-item label="名称:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <el-input v-model="postForm.title" placeholder="请输入名称" aria-required="true" class="pad0" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="封面:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Upload v-model="postForm.poster" class="fileUp" :urls="postForm.poster" :maxcount="1" title="" format="jpg,jpeg,gif,png" @getImage="changePoster" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-row :xs="24" :sm="24" :lg="24">
        <el-form-item label="分享描述:" label-width="110px">
          <el-col :xs="24" :sm="20" :lg="20" class="">
            <el-input
              v-model="postForm.subtitle"
              type="textarea"
              class="pad0"
              style="width:102%"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入分享至微信的描述语"
            />
          </el-col>
        </el-form-item>
      </el-row>
      <el-form-item label="详情:" label-width="85px" class="">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Tinymce ref="editor" v-model="postForm.content" :height="400" />
          </el-col>
        </el-row>
      </el-form-item>

    </el-form>
    <div class="text-center btnWidth">
      <el-button v-loading="loading" class="add" @click="publish()">发布</el-button>
      <el-button v-loading="loading" class="addSave" @click="saveToDraft()">保存草稿</el-button>
      <el-button v-loading="loading" class="addNot" @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Upload from '@/components/Upload/SingleImage'
import Tinymce from '@/components/Tinymce'
import { add, update, getbannerById } from '@/api/banner'

export default {
  components: {
    Upload,
    Tinymce,
    Breadcrumb
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      true: false,
      loading: false,
      textarea2: '',
      tab: 1,
      arr: [
        { id: 1, name: '图文', value: 1 },
        { id: 2, name: '视频', value: 2 }
      ],
      postForm: {},
      rules: {
        title: [{ required: true, validator: validateRequire, trigger: 'change' }],
        subtitle: [{ required: true, validator: validateRequire, trigger: 'change' }],
        type: [{ required: true, validator: validateRequire, trigger: 'change' }],
        content: [{ required: true, validator: validateRequire, trigger: 'change' }]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      getbannerById(this.id).then(response => {
        this.postForm = response.data
      })
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    saveToDraft() {
      this.postForm.status = 0
      this.save()
    },
    publish() {
      this.postForm.status = 1
      this.save()
    },
    cancel() {
      this.$router.push({ path: '/operation/operater' })
    },
    save() {
      const data = this.postForm
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.id) {
            update(data).then(response => {
              console.log(response)
              if (response.code == 200) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }
            })
          } else {
            add(data).then(response => {
              console.log(response)
              this.postForm.id = response.data.id
              this.id = response.data.id
              if (response.code == 200) {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }
            })
          }
        }
      })
      this.loading = false
    },
    changePoster(val) {
      this.postForm.poster = val.toString()
    },
    changeVideo(val) {
      this.postForm.video = val.toString()
    },
    changeType(val) {
      console.log('type:', val)
      this.postForm.type = val
    }
  }
}
</script>

<style lang="scss">
  .overview-tabs {
    .el-tabs {
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
    }

    .el-tabs__content {
      padding: 17px;
    }
  }
</style>

<style lang="scss" scoped>
  .mtright{margin-left: 27px;}
  .overview-tabs {
    padding: 10px;
  }

  .tab-label {
    width: 76px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
  }
  .add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
  .breadcrumb-container {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 0 14px;

    &::after {
      content: '';
      position: absolute;
      left: 0px;
      top: 50%;
      width: 2px;
      height: 37px;
      background-color: #5AC6B7;
      transform: translateY(-50%);
    }
  }
  .fileUp{width: 70px;}
  ::v-deep .upload-container .el-upload{width: 70px;height: 70px;line-height: 80px;}
  .pad0{padding-right: 0;}
  .btnWidth{background: #E5E9ED;padding: 15px 0;}
.btnWidth button{width:107px;height: 41px;}
</style>
